<template>
    <view class="nav_box">
        <!-- <van-tabbar :active="activeNav" @change="onChangeNav" :border="false" fixed >
            <van-tabbar-item class="tab-find" >
                <template v-if="activeNav !== 0">
                    <img slot="icon" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_icon.png" style="width: 18px; height: 18px;" />
                    发现
                </template>
                <img class="find_act_icon" slot="icon-active" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png" style="width: 37px; height: 37px;" />
            </van-tabbar-item>
            <van-tabbar-item >
                <img slot="icon" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shequ_icon.png" style="width: 18px; height: 18px;" />
                <img slot="icon-active" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shequ_act.png" style="width: 18px; height: 18px;" />
                小区
            </van-tabbar-item>
            <van-tabbar-item >
                <template slot="icon">
                    <view class="backIcon">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise_icon.png" style="width: 18px; height: 18px;" />
                    </view>
                </template>
                <template slot="icon-active">
                    <view class="backIcon">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise_act.png" style="width: 18px; height: 18px;" />
                    </view>

                </template>
                惊喜</van-tabbar-item>
            <van-tabbar-item >
                <template slot="icon">
                    <view class="backIcon">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my_icon.png" style="width: 18px; height: 18px;" />
                    </view>
                </template>
                <template slot="icon-active">
                    <view class="backIcon">
                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my_act.png" style="width: 18px; height: 18px;" />
                    </view>
                </template>
                我的
            </van-tabbar-item>
        </van-tabbar> -->
        <van-tabbar :active="activeNav" @change="onChangeNav" :border="false" fixed>
            <van-tabbar-item class="tab-find">
                <template v-if="activeNav !== 0">
                    <img slot="icon" :src="tabIcons[0].normal" style="width: 18px; height: 18px;" />
                    发现
                </template>
                <img class="find_act_icon" slot="icon-active" :src="tabIcons[0].active" style="width: 37px; height: 37px;" />
                
            </van-tabbar-item>
            <van-tabbar-item>
                <img slot="icon" :src="tabIcons[1].normal" style="width: 18px; height: 18px;" />
                <img slot="icon-active" :src="tabIcons[1].active" style="width: 18px; height: 18px;" />
                小区
            </van-tabbar-item>
            <van-tabbar-item>
                <img slot="icon" :src="tabIcons[2].normal" style="width: 18px; height: 18px;" />
                <img slot="icon-active" :src="tabIcons[2].active" style="width: 18px; height: 18px;" />
                惊喜
            </van-tabbar-item>
            <van-tabbar-item>
                <img slot="icon" :src="tabIcons[3].normal" style="width: 18px; height: 18px;" />
                <img slot="icon-active" :src="tabIcons[3].active" style="width: 18px; height: 18px;" />
                我的
            </van-tabbar-item>
        </van-tabbar>
    </view>
</template>

<script>
import { authMixin } from '../utils/isLogin'
export default {

    name: 'FootNav',

    props: {
        activeNav: {
            type: Number,
            default: () => 0
        }
    },
    data () {
        return {
            title: 'Hello111',
            curIndex: 0,
            tabbars: [
                // {
                //     url: '/pages/find/index',
                //     title: '发现',
                //     activeIcon: require('@/static/find_act.png'),
                //     normalIcon: require('@/static/find_icon.png')
                // },
                // {
                //     url: '/pages/community/index',
                //     title: '社区',
                //     activeIcon: require('@/static/shequ_act.png'),
                //     normalIcon: require('@/static/shequ_icon.png')
                // },
                // {
                //     url: '/pages/surprise/index',
                //     title: '惊喜',
                //     activeIcon: require('@/static/surprise_act.png'),
                //     normalIcon: require('@/static/surprise_icon.png')
                // },
                // {
                //     url: '/pages/my/mine',
                //     title: '我的',
                //     activeIcon: require('@/static/my_act.png'),
                //     normalIcon: require('@/static/my_icon.png')
                // }
            ],
            tabIcons: [
                {
                    normal: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_icon.png',
                    active: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/find_act.png'
                },
                {
                    normal: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shequ_icon.png',
                    active: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shequ_act.png'
                },
                {
                    normal: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise_icon.png',
                    active: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise_act.png'
                },
                {
                    normal: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my_icon.png',
                    active: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/my_act.png'
                }
            ]
        }
    },
    onLoad () {
        this.preloadImages()
    },
    methods: {
        preloadImages() {
            this.tabIcons.forEach(icon => {
                uni.getImageInfo({
                    src: icon.normal,
                    success: () => {
                        console.log('图片预加载成功：', icon.normal)
                    },
                    fail: (err) => {
                        console.error('图片预加载失败：', icon.normal, err)
                    }
                })
                uni.getImageInfo({
                    src: icon.active,
                    success: () => {
                        console.log('图片预加载成功：', icon.active)
                    },
                    fail: (err) => {
                        console.error('图片预加载失败：', icon.active, err)
                    }
                })
            })
        },
        clearStorage () {
            uni.showToast({
                title: '清除成功',
                icon: 'success',
                duration: 2000, // 提示的延迟时间，单位毫秒，默认：1500
                mask: false // 是否显示透明蒙层，防止触摸穿透，默认：false
                // image:'./image.png',//自定义图标的本地路径
            })
        },
        onChangeNav (e) {
            console.log('11111', e.detail)
            this.curIndex = e.detail
            this.toPage(e.detail)
        },

        // clickNav (index) {
        //     if (index !== 0) {
        //         console.log(this.curIndex, this.activeNav)
        //     }
        //     this.curIndex = index
        //     console.log(index, 'clickNav', this.curIndex)

        //     // this.$emit('clickNav',index)

        //     // switch (index) {
        //     // 	case 0:
        //     // 		// getCurrentPages().pop()
        //     // 		// uni.navigateTo({
        //     // 		// 	url: '/pages/find/index'
        //     // 		// })
        //     // 		wx.redirectTo({url: '/pages/find/index'})
        //     // 		break;
        //     // 	case 1:
        //     // 		// getCurrentPages().pop()
        //     // 		// uni.navigateTo({
        //     // 		// 	url: '/pages/community/index'
        //     // 		// })
        //     // 		wx.redirectTo({url: '/pages/community/index'})
        //     // 		break;
        //     // 	case 2:
        //     // 		// getCurrentPages().pop()
        //     // 		// uni.navigateTo({
        //     // 		// 	url: '/pages/surprise/index'
        //     // 		// })
        //     // 	wx.redirectTo({url: '/pages/surprise/index'})

        //     // 		break;
        //     // 	case 3:
        //     // 		// getCurrentPages().pop()
        //     // 		// uni.navigateTo({
        //     // 		// 	url: '/pages/my/mine'
        //     // 		// })
        //     // 	wx.redirectTo({url: '/pages/my/mine'})

        //     // 		break;
        //     // }
        // },

        toPage (index) {
            switch (index) {
            case 0:
                // getCurrentPages().pop()
                // uni.navigateTo({
                // 	url: '/pages/find/index'
                // })
                uni.switchTab({ url: '/pages/find/index' })
                break
            case 1:
                // authMixin()
                uni.switchTab({ url: '/pages/community/index' })
                break
            case 2:
                // getCurrentPages().pop()
                // uni.navigateTo({
                // 	url: '/pages/surprise/index'
                // })
                uni.switchTab({ url: '/pages/surprise/index' })
                break
            case 3:
                // getCurrentPages().pop()
                // uni.navigateTo({
                // 	url: '/pages/my/mine'
                // })
                uni.switchTab({ url: '/pages/my/mine' })

                break
            }
        }
    }
}
</script>

<style lang="scss" scoped>

.tab-find{
	.find_act_icon{
		// line-height: 50px;
		padding-top: 9px !important;
	}

}

</style>
